
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Form Elements - Rebound - Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Rebound - Responsive Portfolio Theme for Twitter Bootstrap. Responsive HTML5, CSS3 and jQuery.">
    <meta name="author" content="Pukeko Design Studio">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <!--[if IE 7]>
      <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <script src="js/respond.src.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/sample/logo-144.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/sample/logo-114.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/sample/logo-72.png">
                    <link rel="apple-touch-icon-precomposed" href="img/sample/logo-57.png">
                                   <link rel="shortcut icon" href="img/sample/logo.png">
    
  </head>

  <body>
  
    <div class="wrapper">
      <div class="row">
        <div class="col-md-3 sidebar">
          <div class="navbar" role="navigation">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#rebound-navbar-collapse"><span class="fa fa-bars"></span> Menu</button>
              <a href="index.html" class="navbar-brand">Rebound</a>
              <p class="brand-text">Responsive Portfolio Theme for Bootstrap.</p>
            </div><!-- end navbar-header -->
            <div class="collapse navbar-collapse" id="rebound-navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="title">Menu</li>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="hire.html">Hire Me</a></li>
                <li><a href="blog-parent.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="elements.html">UI Elements</a></li>
                <li class="active"><a href="forms.html">Form Elements</a></li>
                <li><a href="typography.html">Tables &amp; Typography</a></li>
              </ul>
              <form class="navbar-form" role="search">
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search" value="" />
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><span class="fa fa-search"></span></button>
                  </span>
                </div><!-- end input group -->
              </form><!-- end navbar-form -->
              <ul class="nav navbar-nav nav-social hidden-sm hidden-xs">
                <li class="title">Social</li>
                <li><a href="#none">Twitter</a></li>
                <li><a href="#none">Facebook</a></li>
                <li><a href="#none">LinkedIn</a></li>
                <li><a href="#none">Dribbble</a></li>
              </ul>
            </div><!-- end navbar-collapse -->
          </div><!-- end navbar -->
        </div><!-- end col -->
        <div class="col-md-9 content">
          <div class="page">
            <article>
              <div class="page-header">
                <h1>Form Elements</h1>
                <p class="lead">A range of form inputs, elements and buttons.</p>
              </div><!-- end page-header -->
              <h3>Form Inputs</h3>
              <form class="form-horizontal">
                <div class="form-group">
                  <label class="control-label" for="inputEmail">Text Input</label>
                  <div class="controls">
                    <div class="row">
                      <div class="col-md-6">
                        <input type="text" class="form-control" id="inputEmail" placeholder="Email" />
                      </div><!-- end col md -->
                      <div class="col-md-6">
                        <span class="help-inline">Inline help text</span>
                      </div><!-- end col md -->
                    </div><!-- end row -->
                    <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
                  </div><!-- end controls-->
                </div><!-- end form-group -->
            
                <div class="form-group has-error">
                  <label class="control-label" for="inputEmail">Error Input</label>
                  <div class="controls">
                    <input type="text" class="form-control" value="Error" />
                    <span class="help-inline">Please correct the error</span>
                  </div><!-- end controls-->
                </div><!-- end form-group -->
            
                <div class="form-group has-success">
                  <label class="control-label" for="inputEmail">Success Input</label>
                  <div class="controls">
                    <input type="text" class="form-control" value="Success" />
                    <span class="help-inline">Woohoo!</span>
                  </div><!-- end controls-->
                </div><!-- end form-group -->
            
                <div class="form-group has-warning">
                  <label class="control-label" for="inputWarning">Input with warning</label>
                  <div class="controls">
                    <input type="text" class="form-control" id="inputWarning" value="Warning" />
                    <span class="help-inline">Something may have gone wrong</span>
                  </div><!-- end controls -->
                </div><!-- end form-group -->
            
                <div class="form-group disabled">
                  <label class="control-label" for="inputEmail">Disabled Input</label>
                  <div class="controls">
                    <input type="text" class="form-control" value="Disabled" disabled="disabled" />
                  </div><!-- end controls-->
                </div><!-- end form-group -->
            
                <div class="form-group">
                  <label class="control-label" for="inputEmail">Uneditable Input</label>
                  <div class="controls">
                    <span class="form-control uneditable-input">Some value here</span>
                  </div><!-- end controls-->
                </div><!-- end form-group -->
            
                <div class="form-group">
                  <label class="control-label" for="inputEmail">Select</label>
                  <div class="controls">
                    <select class="form-control">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                  </div><!-- end controls-->
                </div><!-- end form-group -->
            
                <div class="form-group">
                  <label class="control-label" for="js-typeahead">Typeahead</label>
                  <div class="controls">
                    <input type="text" class="form-control typeahead width-100pc" id="js-typeahead" />
                  </div><!-- end controls-->
                </div><!-- end form-group -->
            
                <div class="form-group">
                  <label class="control-label" for="inputEmail">Textarea</label>
                  <div class="controls">
                    <textarea rows="3" class="form-control"></textarea>
                  </div><!-- end controls-->
                </div><!-- end form-group -->
            
                <div class="form-actions">
                  <button type="submit" class="btn btn-primary">Save changes</button>
                  <button type="button" class="btn btn-grey">Cancel</button>
                </div><!-- end form actions -->
            
              </form>
              
              <div class="space-40"></div>
              
              <h3>Form Inline</h3>
              <form class="form-inline" role="form">
                <div class="form-group">
                  <label class="sr-only" for="exampleInputEmail2">Email Address</label>
                  <input type="email" class="form-control width-150" id="exampleInputEmail2" placeholder="Email Address" />
                </div><!-- end form group -->
                <div class="form-group">
                  <label class="sr-only" for="exampleInputPassword2">Password</label>
                  <input type="password" class="form-control width-150" id="exampleInputPassword2" placeholder="Password" />
                </div><!-- end form group -->
                <label class="checkbox">
                  <input type="checkbox" value="">
                  <span></span>
                  Checkbox
                </label>
                <button type="submit" class="btn btn-default">Sign in</button>
              </form>
              <div class="space-40"></div>
              <h3>Appended &amp; Prepended Form Elements</h3>
              <form class="form-search">
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Enter your search term..." value="" />
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Search</button>
                  </span>
                </div><!-- end input group -->
                <div class="space-20"></div>
                <div class="input-group">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Search</button>
                  </span>
                  <input type="text" class="form-control" placeholder="Enter your search term..." value="" />
                </div><!-- end input group -->
              </form>
              <div class="space-20"></div>
              <form class="form-horizontal">
                <div class="input-group">
                  <span class="input-group-addon">@</span>
                  <input type="text" class="form-control" placeholder="Username">
                </div><!-- end input group -->
                <div class="space-20"></div>
                <div class="input-group">
                  <input type="text" class="form-control">
                  <span class="input-group-addon">.00</span>
                </div><!-- end input group -->
                <div class="space-20"></div>
                <div class="input-group">
                  <span class="input-group-addon">$</span>
                  <input type="text" class="form-control">
                  <span class="input-group-addon">.00</span>
                </div><!-- end input group -->
              </form>
              
              <div class="row">
                <div class="col-md-6">
                  <h3>Checkboxes</h3>
                  <label class="checkbox">
                    <input type="checkbox" value="" />
                    <span></span>
                    Checkbox
                  </label>
                  <label class="checkbox">
                    <input type="checkbox" value="" checked />
                    <span></span>
                    Checked Checkbox
                  </label>
                  <label class="checkbox disabled">
                    <input type="checkbox" value="" disabled />
                    <span></span>
                    Disabled Checkbox
                  </label>
                  <label class="checkbox disabled checked">
                    <input type="checkbox" value="" disabled checked />
                    <span></span>
                    Disabled Checked Checkbox
                  </label>
                </div> <!-- end col -->

                <div class="col-md-6">
                  <h3>Radio Buttons</h3>
                  <label class="radio">
                    <input type="radio" value="" />
                    <span></span>
                    Radio
                  </label>
                  <label class="radio checked">
                    <input type="radio" value="" checked />
                    <span></span>
                    Checked Radio
                  </label>
                  <label class="radio disabled">
                    <input type="radio" value="" disabled />
                    <span></span>
                    Disabled Radio
                  </label>
                  <label class="radio disabled checked">
                    <input type="radio" value="" disabled checked />
                    <span></span>
                    Disabled Checked Radio
                  </label>
                </div> <!-- end col -->
              </div><!-- end row -->
              
              <div class="space-40"></div>
              
              <h3>Progress Bars &amp; Slider</h3>
              <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="sr-only">60% Complete</span>
              </div><!-- end progress bar -->
              <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div><!-- end progress bar -->
              </div><!-- end progress -->
              <div class="progress progress-striped active">
                <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                  <span class="sr-only">45% Complete</span>
                </div><!-- end progress bar -->
              </div><!-- end progress -->
              <div class="progress">
                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                  <span class="sr-only">60% Complete (warning)</span>
                </div><!-- end progress bar -->
              </div><!-- end progress -->
              <div class="progress">
                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                  <span class="sr-only">80% Complete (danger)</span>
                </div><!-- end progress bar -->
              </div><!-- end progress -->
              <div class="progress">
                <div class="progress-bar progress-bar-success" style="width: 35%">
                  <span class="sr-only">35% Complete (success)</span>
                </div><!-- end progress bar -->
              </div><!-- end progress -->
              <div class="progress">
                <div class="progress-bar progress-bar-warning" style="width: 20%">
                  <span class="sr-only">20% Complete (warning)</span>
                </div><!-- end progress bar -->
                <div class="progress-bar progress-bar-danger" style="width: 10%">
                  <span class="sr-only">10% Complete (danger)</span>
                </div><!-- end progress bar -->
              </div><!-- end progress -->
              <div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
                <div class="ui-slider-segment"></div>
                <div class="ui-slider-segment"></div>
                <div class="ui-slider-segment"></div>
              </div><!-- end slider -->
            </article><!-- end article -->
          </div><!-- end page -->
        </div><!-- end col -->
      </div><!-- end row -->
    </div><!-- end wrapper -->
    
    <footer class="hidden-xs">
      <p class="pull-left">&copy; Copyright 2014. Rebound.</p>
      <p class="pull-right"><a href="#none">Rebound</a> by Pukeko Design Studio. <a href="documentation.html">Documentation</a>.</p>
    </footer>
    
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="js/typeahead.min.js"></script>
    <script src="js/rebound.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('.dropdown-toggle').dropdown();
        $("[rel='tooltip']").tooltip();
        // Init jQuery UI slider
        $("#slider").slider({
            min: 1,
            max: 5,
            value: 3,
            orientation: "horizontal",
            range: "min",
        });
        $('#js-typeahead').typeahead({
          name: 'location',
          local: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
        });
      });
    </script>

  </body>
</html>
